/*
 * @Title: 攻略模块
 * @Created by: gsjPC 
 */
<template>
	<view>
		<HeaderNavInput :config="navConfig" :rightTapHandle1="rightTapHandle1"/>
		<view class="glBanner">
			<!-- <image src="/static/glBan.png"></image> -->
			<Banner />
			<!-- <view class="weaterAbsot">
				<view class="top">
					<text>沈阳</text>
					<uni-icon type="arrowdown" color="#fff" size="40"></uni-icon>
				</view>
				<view class="botm">
					<image src="/static/weater.png"></image>
					<text>27°</text>
				</view>
			</view> -->
		</view>
		<view class="glClear"></view>
			<!-- tab切换头部 -->
			<view class="tabCard">
			     <view 
					 v-for="(title,index) in tabBars" 
					 :key="index"
					 @click="tapTab(index)"  
					 class="tabCard_list" 
					 :class="{active:tabIndex==index}">
				 {{title.name}}
				 </view>
			 </view>
			<!-- tab选项卡内容 -->
			<view class="tab-content" :duration="300">
				<guan-fang-gong-lue></guan-fang-gong-lue>
			</view>
	</view>
</template>

<script>
	import guanFangGongLue from './guanFangGongLue/guanFangGongLue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import amap from '../../common/amap-wx.js';
	import Banner from '@/components/banner.vue'
	export default{
		components:{
			guanFangGongLue,
			uniIcon,
			Banner
		},
		data(){
			return{
				navConfig: {
					left:{
						leftExist:true,
						ifleftGoback:false,
						leftGoback:'arrowleft',
						leftGobackColor:'#ffffff',
					},
					mid:{
						ifSearch:true,
						placeText:'输入相关景区/酒店/餐饮名称',
						isShowScan:false,
						isdisabled:false,//是否禁用搜索框
						isOpacity:1,//输入框是否半透明
						},
					right:{
						rightExist:true,
						rightIcon1:'/static/weater.png',
						rightIcon2:'',
						rightIconName1:'多云',
						rightIconName2:'',
						ifrightIcon2:false,
						ifrightIcon1:true,//是否显示第一个图标
					},
					row:{
						isShowRightRow:false, //是否显示右侧图标文字横排
						rowText:'',//文字内容
						rowIco:'',//icon
						rowTextColor:'',//文字颜色
						rowIcoColor:''//icon颜色
						}
				},
				amapPlugin: null,
				tabBars:[
					{name:'官方攻略'},
					{name:'个人游记'},
					{name:'问卷定制'},
					{name:'我的行程'}
				],
				tabIndex:0 ,//默认显示选项卡第一个内容
				key:'c2aa600e0fff40413d677910af4151d2', //个人申请的测试key
			}
		},
		methods:{
			// 跳转天气页面
			rightTapHandle1(){
				uni.navigateTo({
					url:'/pages/common/wheater'
				})
			},
			tapTab(index){
				this.tabIndex = index;
				this.$store.commit('tabIndexUpdata',this.tabIndex);
				if(this.tabIndex !== 0){
					uni.navigateTo({
						url:'./glTabbar'
					})
				}
			},
		},
		onShow() {
			this.tabIndex = 0;
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
		},
		computed:{
			// setHeight(){
			// 	let statusBarHeight = global.statusBarHeight
			// 	return  statusBarHeight
			// }
		}
	}
</script>

<style>
	.glClear{
		 clear: both;
		width:100%;
		height:420upx; 
		position: relative;
		
	}
	.glBanner{
		width:100%;
		height:420upx;
		background-color: #ddd;
		position: absolute;
		top:0;
		left: 0;
		z-index: 8;
		overflow: hidden;
	}
	.glBanner image{
		width:100%;
		/* height: 457upx; */
	}
	.weaterAbsot{
		position: absolute;
		left:80upx;
		top:185upx;
		z-index: 9;
	}
	.weaterAbsot .top{
		margin-bottom:10upx;
		display: flex;
	}
	.weaterAbsot .uni-icon{
		margin-top: 10upx;
	}
	.weaterAbsot .top text{
		font-size:60upx;
		color: #FFFFFF;
		margin-right: 20upx;
	}
	.weaterAbsot .botm{
		display: flex;
	}
	.weaterAbsot .botm image{
		width:70upx;
		height: 54upx;
		margin-right: 14upx;
	}
	.weaterAbsot .botm text{
		font-size: 42upx;
		color: #FFFFFF;
	}
	.active{
		color: #55A0FF;
		border-bottom: 1upx solid #F6F6F6;
	}
	/* 头部选项卡 */
	.tabCard{
		width:100%;
		display:flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		line-height: 86upx;
		font-size: 28upx;
	}
	.tabCard_list{
		flex: 1;
		text-align: center;
	}
</style>
